<?php
require('set.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>User-Center</title>
</head>
<body>
<style>
.book-grid {
    max-width: 1200px;
    margin: 20px auto;
    display: grid;
    animation: fade 1s ease-in-out;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .book-item {
    background: #fff;
    border-radius: 4px;
    animation: fade 1s ease-in-out;
    height: 450px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .book-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  }
  
  .book-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
  }
  
  .book-item img:hover {
    opacity: 0.8;
  }
  
  .book-item h3 {
    padding: 10px;
    font-size: 18px;
    text-align: center;
  }
  @media (max-width: 768px) {
    .book-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 480px) {
    .book-grid {
      grid-template-columns: 1fr;
    }
  
    .search-container input,
    .search-container button {
      font-size: 14px;
    }
  }
  .book-item a {
    text-decoration: none; 
    color: inherit; 
  }
  
  .book-item a:hover h3 {
    color: #5c67f2; 
  }
  .liked-icon {
    color: red; 
}
</style>
<section class="rt_wrap content mCustomScrollbar">
 <div class="rt_content">
 <main id='bookc' class="book-grid">
    </main>
</div>
</section>
</body>
</html>
<script>
  var userid = sessionStorage.getItem('user');
	(function($){
		$(window).load(function(){
			$("a[rel='load-content']").click(function(e){
				e.preventDefault();
				var url=$(this).attr("href");
				$.get(url,function(data){
					$(".content .mCSB_container").append(data); 
					$(".content").mCustomScrollbar("scrollTo","h2:last");
				});
			});		
			$(".content").delegate("a[href='top']","click",function(e){
				e.preventDefault();
				$(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
			});	
		});
	})(jQuery);
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    loading_load_show();
        let mylikebookf1 = localStorage.getItem('mylikebook');
        let likebooks = mylikebookf1 ? JSON.parse(mylikebookf1) : { booksList: [] };
        likebooks.booksList.forEach(function(likedBook) {
          if(likedBook.user === userid){
            const bookItem = document.createElement('div');
            bookItem.className = 'book-item';
            bookItem.innerHTML = `
                <a href="/novelread.php?read=${likedBook.book}">
                    <img src="${likedBook.img}" alt="${likedBook.book}">
                    <h3>${likedBook.book}</h3>
                </a>
            `;
            document.querySelector('.book-grid').appendChild(bookItem);
              }
    });
        loading_load_hide();
    });
</script>
